<template>
  <el-tabs
    :model-value="modelValue"
    :type="typeStyle"
    :class="['modern-tabs']"
    @tab-click="handleTabClick"
    v-bind="$attrs"
  >
    <slot />
  </el-tabs>
</template>

<script setup>
import { computed } from "vue";

// 定义 props
const props = defineProps({
  modelValue: {
    type: String,
    default: "first",
  },
  typeStyle: {
    type: String,
    default: "card",
  },
});

// 定义 emits
const emit = defineEmits(["update:modelValue", "tab-click"]);

// 处理 tab 点击事件
const handleTabClick = (tab, event) => {
  emit("update:modelValue", tab.props.name);
  emit("tab-click", tab, event);
};
</script>

<style lang="less" scoped>
.modern-tabs {
  // 基础样式
  :deep(.el-tabs__header) {
    margin: 0 0 10px 0;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
  }

  :deep(.el-tabs__nav) {
    border: none;
    background-color: transparent;
    display: flex;
    gap: 6px;
  }

  :deep(.el-tabs__item) {
    border: none;
    background: var(--el-bg-color);
    color: var(--el-text-color-regular);
    font-weight: 400;
    font-size: 14px;
    padding: 0 16px;
    height: 34px;
    line-height: 34px;
    border-radius: 3px;
    margin: 0;
    position: relative;
    transition: all 0.2s ease;
    cursor: pointer;
    // border-bottom: 2px solid transparent;

    // 悬停效果
    &:hover {
      color: var(--el-color-primary);
      background: rgba(64, 158, 255, 0.05);
    }

    // 激活状态
    &.is-active {
      color: var(--el-color-primary);
      font-weight: 500;
    }

    // 禁用状态
    &.is-disabled {
      opacity: 0.5;
      cursor: not-allowed;

      &:hover {
        color: var(--el-text-color-regular);
        background: transparent;
      }
    }
  }
}
</style>
